// import React, { Component, PureComponent } from "react";

// class Child extends PureComponent {
//   render() {
//     console.log("child");
//     return <div>child</div>;
//   }
// }

// const obj = { color: "red" };
// class UseCallback extends Component {
//   state = {
//     count: 1,
//   };
//   fn = () => {
//     this.setState((prevState) => {
//       return {
//         count: prevState.count + 1,
//       };
//     });
//   };
//   fn2 = () => {
//     console.log(this.state.count);
//   };
//   render() {
//     return (
//       <>
//         <h3>useCallBack</h3>
//         <p>{this.state.count}</p>
//         <button onClick={this.fn}>+</button>
//         <Child style={obj} onOk={this.fn2} />
//       </>
//     );
//   }
// }

// export default UseCallback;

import React, { useState, memo, useCallback } from "react";
// useCallback是用来缓存函数的, 将函数体作为第一个参数，函数组件重新渲染，函数不会改变地址
// 第二个参数是依赖

// 当这个函数要作为自定义属性，向子组件传的时候，就加上

// memo是一个高阶组件，作用和PureComponent完全一样
const Child = memo(() => {
  console.log("child");
  return <div>child</div>;
});

const App = () => {
  const [count, set_count] = useState(5);
  const fn = () => {
    set_count((v) => v + 1);
  };
  // const fn2 = useMemo(() => {
  //   return () => {
  //     console.log(555);
  //   };
  // }, []);
  const fn2 = useCallback(() => {
    console.log(555);
  }, []);
  return (
    <>
      <h3>useCallBack</h3>
      <p>{count}</p>
      <button onClick={fn}>+</button>
      <Child onOk={fn2} />
    </>
  );
};

export default App;
